<template>
    <header>
        <div class="leftBox">
            <el-button type="primary" :class="ico" class="el-button" size="mini" @click="changeShow"></el-button>
            <h3>{{title}}</h3>
        </div>

        <el-button type="primary" class="signOutBtn" @click="signOut()">退出登录</el-button>
    </header>
</template>
  
<script>
import { mapMutations,mapState } from 'vuex';
export default {
    name: 'Header',
    computed:{
        ...mapState('home',['ico','title']),
    },
    methods: {
        ...mapMutations('home', [ 'changeShow' ]),
        //退出登录确认
        signOut(){
            this.$confirm('真的要退出吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //确认之后，清除token
                this.$store.commit('clearToken')
                //跳转到登录页面
                this.$router.replace({ name:'Login' })
            })
        }
    },
}
</script>
  
<style lang="less" scoped>
header {
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;

    .leftBox {
        display: flex;
        height: 100%;
        justify-content: left;
        align-items: center;

        h3 {
            margin-left:20px;
            font-size: 18px;
            color: #fff;
        }

        .el-button {
            box-sizing: border-box;
            padding: 0px;
            height: 27px;
            width: 40px;
            line-height: 27px;
            text-align: center;
            background-color: #fff;
            color: #000;
            font-size: 20px;
            border: 0px;
        }
    }

    .signOutBtn{
        padding: 0px !important;
        height: 27px;
        width: 70px;
        font-size: 14px;
        font-weight: bold;
        line-height: 27px;
        text-align: center;
        color: #000;
        background-color: #fff;
        border: 0px;
    }
}
</style>